﻿<%@page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=path%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>


<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">
	$(function(){
		//设置日期控件
		$(".time").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
			autoclose: true,
			todayBtn: true,
			pickerPosition: "top-left"
		});
		$("#isCreateTransaction").click(function(){
			if(this.checked){
				$("#create-transaction2").show(200);
			}else{
				$("#create-transaction2").hide(200);
			}
		});
		$("#searchActivity").click(function () {
			$("#searchActivityModal").modal("show");
		})
		//页面加载完毕展现所有的该线索已关联的市场活动信息
		getAllActivity();
		//点击回车键通过名字搜索对应的市场活动,给模态窗口绑定
		$("#searchActivityModal").keydown(function (event) {
			//通过名字进行模糊查询
			$.ajax({
				url: "workbench/clue/getActivityListByName.do",
				type: "get",
				dataType: "json",
				data:{"name":$.trim($("#aname").val())},
				success:function (resp) {
					//获得市场活动列表
					var html="";
					$.each(resp,function (i,n) {
						html+='<tr>'
						html+='<td><input type="radio" class="box" value="'+n.id+'" name="activity"/></td>'
						html+='<td id="'+n.id+'">'+n.name+'</td>'
						html+='<td>'+n.startDate+'</td>'
						html+='<td>'+n.endDate+'</td>'
						html+='<td>'+n.owner+'</td>'
						html+='</tr>'
					})
					$("#activityBody").html(html);
				}
			})
		})
		//点击模态窗口的提交按钮将数据铺到页面
		$("#submitBtn").click(function () {
			var id=$(".box:checked").val();
			var name=$("#"+id).html();
			//给页面赋值
			$("#activityName").val(name);
			$("#activityId").val(id);
			//关闭模态窗口
			$("#searchActivityModal").modal("hide");
			//清空搜索框，以及单选框选中状态
			$("#aname").val("");
			$(".box:checked").prop("checked",false);
		})
		//点击线索转换按钮，执行线索的转换操作
		$("#convertBtn").click(function () {
			//根据创建交易的复选框是否选中决定是否为客户创建交易
			if ($("#isCreateTransaction:checked").length==1){
				//创建交易
				$("#tranFrom")[0].action="workbench/clue/convert.do";
				$("#tranFrom")[0].submit();
			}else {
				//不需要创建交易
				window.location.href="workbench/clue/convert.do?clueId="+"${param.id}";
			}
		})

	});
	//获取该条线索已关联的市场活动
	function getAllActivity() {
		$.ajax({
			url:"workbench/clue/getActivityListByClue.do",
			type:"get",
			dataType:"json",
			success:function (resp) {
				//返回一个市场活动json数组
				var html="";
				$.each(resp,function (i,n) {
					html+='<tr>'
					html+='<td><input type="radio" class="box" value="'+n.id+'" name="activity"/></td>'
					html+='<td id="'+n.id+'">'+n.name+'</td>'
					html+='<td>'+n.startDate+'</td>'
					html+='<td>'+n.endDate+'</td>'
					html+='<td>'+n.owner+'</td>'
					html+='</tr>'
				})
				$("#activityBody").html(html);
			}
		})
	}
</script>

</head>
<body>
	
	<!-- 搜索市场活动的模态窗口 -->
	<div class="modal fade" id="searchActivityModal" role="dialog" >
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">搜索市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						<form class="form-inline" role="form">
						  <div class="form-group has-feedback">
							  <input type="text" id="" style="display: none"/>
						    <input type="text" class="form-control" style="width: 300px;" id="aname" placeholder="请输入市场活动名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
						</form>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
								<td></td>
							</tr>
						</thead>
						<tbody id="activityBody">
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary"  id="submitBtn">提交</button>
				</div>
			</div>
		</div>
	</div>

	<div id="title" class="page-header" style="position: relative; left: 20px;">
		<h4>转换线索 <small>${param.fullname}${param.appellation}-${param.company}</small></h4>
	</div>
	<div id="create-customer" style="position: relative; left: 40px; height: 35px;">
		新建客户：${param.company}
	</div>
	<div id="create-contact" style="position: relative; left: 40px; height: 35px;">
		新建联系人：${param.fullname}${param.appellation}
	</div>
	<div id="create-transaction1" style="position: relative; left: 40px; height: 35px; top: 25px;">
		<input type="checkbox" id="isCreateTransaction"/>
		为客户创建交易
	</div>
	<div id="create-transaction2" style="position: relative; left: 40px; top: 20px; width: 80%; background-color: #F7F7F7; display: none;" >
	
		<form id="tranFrom" method="post">
			<input type="hidden" name="clueId" value="${param.id}">
		  <div class="form-group" style="width: 400px; position: relative; left: 20px;">
		    <label for="amountOfMoney">金额</label>
		    <input type="text" class="form-control" id="amountOfMoney" name="money">
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="tradeName">交易名称</label>
		    <input type="text" class="form-control" id="tradeName" name="name">
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="expectedClosingDate">预计成交日期</label>
		    <input type="text" class="form-control time" id="expectedClosingDate" name="expectedDate" readonly>
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="stage">阶段</label>
		    <select id="stage"  class="form-control" name="stage">
		    	<option></option>
		    	<c:forEach var="s" items="${stage}">
					<option value="${s.value}">${s.text}</option>
				</c:forEach>
		    </select>
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="activityName">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);" id="searchActivity" style="text-decoration: none;"><span class="glyphicon glyphicon-search"></span></a></label>
		    <input type="text" class="form-control" id="activityName" placeholder="点击上面搜索" readonly>
			<input type="hidden" id="activityId" name="activityId"/>
			<input type="hidden" name="flag" value="1"/>
		  </div>
		</form>
		
	</div>
	
	<div id="owner" style="position: relative; left: 40px; height: 35px; top: 50px;">
		记录的所有者：<br>
		<b>${param.owner}</b>
	</div>
	<div id="operation" style="position: relative; left: 40px; height: 35px; top: 100px;">
		<input class="btn btn-primary" type="button" value="转换" id="convertBtn">
		&nbsp;&nbsp;&nbsp;&nbsp;
		<input class="btn btn-default" type="button" value="取消">
	</div>
</body>
</html>